<!--
* @FileDescription: 任务详情组件
* @Author: 陈卓
* @Date: 2021-4-19
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->
<template>
	<view class="task-detail">
		<view class="task-detail-title">{{titile}}</view>
		<view class="task-detail-content">
			<view class="content-top">
				<view class="content-top-image">
					<image class="image" src="../../static/water.jpg" mode=""></image>
				</view>
				<view class="content-top-title">
					推拿按摩
				</view>
			</view>
			<view class="content-main">
				<view class="item">
					预约人：<text class="text">xxxx</text>
				</view>
				<view class="item">
					开始时间：<text class="text">xxxx</text>
				</view>
				<view class="item" v-if="detailType">
					预约人电话：<text class="text">xxxx</text>
				</view>
				<view class="item" v-if="detailType">
					预约时间：<text class="text">xxxx</text>
				</view>
				<view class="item" v-if="detailType">
					结束时间：<text class="text">xxxx</text>
				</view>
				<view class="item">
					项目名称：<text class="text">xxxx</text>
				</view>
				<view class="item">
					项目时长：<text class="text">xxxx</text>
				</view>
				<view class="task-statusBox">
					<view class="box" @click="onStart">
						<view class="text-pos-style">点击开始</view>
						<view class="text-pos-style">30：00</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TaskDetail",
		props: {
			// 任务类型
			detailType: {
				type: Boolean,
				default: false
			},
			titile:{
				type:String,
				default:"任务详情"
			}
		},
		data() {
			return {

			}
		},
		methods: {
			// 点击开始事件
			onStart() {
				console.log('点击开始')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.task-detail {
		width: 100%;
		height: 100%;
		padding: 60rpx 34rpx 10rpx 34rpx;
		// 背景渐变实现
		background-image: linear-gradient($subject-bgc 0%, $subject-bgc 40%, white 0%, white 50%);

		// 标题
		.task-detail-title {
			height: 66rpx;
			font-family: PingFangSC-Medium;
			font-size: 48rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #ffffff;
		}

		// 盒子
		.task-detail-content {
			width: 100%;
			padding: 20rpx;
			margin-top: 24rpx;
			background-color: #FFFFFF;
			border-radius: 27rpx;
			box-shadow: 2rpx 2rpx 18rpx 8rpx rgba(210, 205, 197, 0.37);

			.content-top {
				display: flex;
				align-items: center;

				.image {
					width: 60rpx;
					height: 60rpx;
					background-image: linear-gradient(90deg);
					border-radius: 8rpx;
				}

				.content-top-title {
					padding-left: 16rpx;
					font-size: 32rpx;
					font-weight: 900;
					font-family: PingFangSC-Medium;
					color: rgba(0, 0, 0, 0.85);
				}
			}

			.content-main {
				border-top: 1rpx solid #c8c9cc54;
				margin: 10rpx 0 0 0;
				padding: 20rpx 0 0 0;

				.item {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 26rpx;
					color: #a6a097;

					.text {
						color: #6d7278;
					}
				}

				// 状态盒子
				.task-statusBox {
					height: 400rpx;
					display: flex;
					// 垂直水平居中
					align-items: center;
					justify-content: center;

					.box {
						position: relative;
						width: 290rpx;
						height: 290rpx;
						border-radius: 50%;
						box-shadow: 0rpx 0rpx 26rpx #f7b32c;
						background-image: radial-gradient(at left top, #f7b32c, #f49c1c);
					}

					.box view:nth-child(1) {
						transform: translate(-50%, -100%);
						font-size: 36rpx;
					}

					.box view:nth-child(2) {
						transform: translate(-50%);
						font-size: 28rpx;
					}
				}
			}
		}
	}

	// 公共定位样式
	.text-pos-style {
		position: absolute;
		top: 50%;
		left: 50%;
		color: #FFFFFF;
	}
</style>
